<template>
	<view class="page">
		<cu-custom bgColor="bg-shadeTop" :isBack="true"><block slot="content">全能卡</block></cu-custom>
		<view class="opacity-content">
			<swiper class="course-banner screen-swiper square-dot" :indicator-dots="true" :circular="true"
			 :autoplay="true" interval="5000" duration="500">
				<swiper-item v-for="(item,index) in swiperList" :key="index">
					<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image>
					<video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video>
				</swiper-item>
			</swiper>
			<view class="cu-card">
				<view class="cu-item shadow padding">
					<text class="block  text-lg margin-bottom-xs">
						健身卡介绍
					</text>
					<view>
						<text class="text-sm text-gray">全能卡，</text>
					</view>
				</view>
			</view>
			<view class="cu-card">
				<view class="cu-item shadow padding">
					<!-- 只有自己的卡才有时效和余额 -->
					<text class="block  text-lg margin-bottom-xs">
						时效
					</text>
					<view class="text-red text-sm margin-bottom-sm">
						2019-08-14 ~ 2019-12-14
					</view>
					<text class="block  text-lg margin-bottom-xs">
						余额
					</text>
					<view class="text-red text-sm margin-bottom-sm">
						￥1500.00
					</view>
					<text class="block  text-lg margin-bottom-xs">
						支持场馆
					</text>
					<view class="text-gray text-sm margin-bottom-sm">
						金穗路全球建面电
					</view>
					<text class="block  text-lg margin-bottom-xs">
						支持课程
					</text>
					<view class="text-gray text-sm margin-bottom-sm">
						基础塑形，tbt减脂，全能战队集训
					</view>
				</view>
			</view>
			<view class="cu-card">
				<view class="cu-item shadow padding">
					<text class="block  text-black text-lg margin-bottom-xs">
						注意事项
					</text>
					<view class="text-gray">
						<text class="block text-sm">1、练前要吃饭</text>
						<text class="block text-sm">2、练后要吃饭</text>
					</view>
				</view>
			</view>
			<view class="cu-tabbar-height"></view>
			<view class="cu-bar bg-white tabbar border foot">
				<view class="submit">续卡</view>
				<navigator class="bg-orange submit" url="/pages/cardlist/index">购卡</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				cardCur: 0,
				swiperList: [
					{
						id: 0,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big84000.jpg'
					}, {
						id: 1,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big37006.jpg',
					}, {
						id: 2,
						type: 'image',
						url: 'https://ossweb-img.qq.com/images/lol/web201310/skin/big39000.jpg'
					},
				],
				avatar: [
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg',
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg',
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg',
					'https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg'
				],
			};
		},
		computed: {
			userInfo: function() {
				return this.$store.state.userInfo
			}
		}
	}
</script>

<style lang="scss">
.page {
	.opacity-content{
		position: absolute;
		width: 100%;
		top: 0;
	}
}
</style>
